<template>
  <div class="warpper-box">
    <a-row :gutter="24">
      <a-col :span="6">
        <a-card title="社保计算器">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="缴纳城市">
              <CityPicker placeholder="请选择缴纳城市" :autoWidth="'250px'" :cityList="cityList" @change="handleCity"
                :value.sync="params.cityId"></CityPicker>
            </a-form-item>
            <a-form-item label="社保类型">
              <a-select @change="insureChange" placeholder="请选择社保类型" v-model="params.insureTypeId" allowClear style="width: 250px;">
                <a-select-option v-for="item in insureTypeList" :key="item.typeId" :value="item.typeId">
                  {{ item.typeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="社保基数">
              <a-input v-model="params.socialBase" :addon-after="'范围: '+ insureTypeMin + ' - ' + insureTypeMax" placeholder="请输入基数" />
            </a-form-item>
            <a-form-item label="公积金比例">
              <a-select @change="fundsChange" placeholder="请选择公积金比例" v-model="params.fundsTypeId" allowClear style="width: 250px;">
                <a-select-option v-for="item in fundsTypeList" :key="item.typeId" :value="item.typeId">
                  {{ item.typeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="公积金基数">
              <a-input v-model="params.fundsBase" :addon-after="'范围: '+ fundsTypeMin + ' - ' + fundsTypeMax" placeholder="请输入基数" />
            </a-form-item>
            <div style="text-align: center;">
              <a-button type='primary' @click="compute" :disabled="!params.cityId">立即计算</a-button>
              <a-button type='primary' ghost @click="reset">重置</a-button>
            </div>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card title="计算结果" v-if="isResult">
          <div class="result">
            <a-row class="head">
              <a-col :span="8">
                缴纳项目&nbsp;&nbsp;&nbsp;缴纳基数
              </a-col>
              <a-col :span="8">
                基数×个人比例&nbsp;=&nbsp;个人缴纳
              </a-col>
              <a-col :span="8">
                基数×企业比例&nbsp;=&nbsp;企业缴纳
              </a-col>
            </a-row>
            <a-row class="content" v-for="(item,index) in resultInfo.social.items" :key="index">
              <a-col :span="8">{{ item.itemName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.base }}</a-col>
              <a-col :span="8">{{ item.personFee == 0?'-':item.personProp }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ item.personFee }}</a-col>
              <a-col :span="8">{{ item.companyFee == 0?'-':item.companyProp }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ item.companyFee }}</a-col>
            </a-row>
            <a-row class="content">
              <a-col :span="8">社保合计：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ resultInfo.social.totalFee }}</a-col>
              <a-col :span="8">个人共缴纳：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ resultInfo.social.personTotalFee }}</a-col>
              <a-col :span="8">企业共缴纳：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ resultInfo.social.companyTotalFee }}</a-col>
            </a-row>
            <a-row class="content" v-for="(item,index) in resultInfo.funds.items" :key="index">
              <a-col :span="8">{{ item.itemName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.base }}</a-col>
              <a-col :span="8">{{ item.personFee == 0?'-':item.personProp }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ item.personFee }}</a-col>
              <a-col :span="8">{{ item.companyFee == 0?'-':item.companyProp }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{ item.companyFee }}</a-col>
            </a-row>
            <a-row class="foot">
              <a-col :span="8">总计共缴纳：&nbsp;&nbsp;&nbsp;￥{{ resultInfo.totalFee }}</a-col>
              <a-col :span="8">个人共缴交：&nbsp;&nbsp;&nbsp;￥{{ resultInfo.personTotalFee }}</a-col>
              <a-col :span="8">企业共缴交：&nbsp;&nbsp;&nbsp;￥{{ resultInfo.companyTotalFee }}</a-col>
            </a-row>
          </div>
        </a-card>
        <a-card title="政策与法规说明" v-else>
          <a-alert type="info">
            <div slot="message">
              1、计算公式为：<img src="~@/assets/img_calc-type.jpg" alt="" style="margin-left: 20px;">
            </div>
          </a-alert>
          <a-alert type="info" style="margin-top: 30px;">
            <div slot="message">
              2、社保缴费比例一般如下：
              <div class="insure">a) 养老保险：单位<span>20%</span>;，个人<span>8%</span>；</div>
              <div class="insure">b) 医疗保险：单位<span>8%</span>，个人<span>2%</span>；</div>
              <div class="insure">c) 失业保险：单位<span>2%</span>，个人<span>1%</span>；</div>
              <div class="insure">d) 工伤保险和生育保险完全是由企业承担的各在1%左右，个人不需要缴纳；</div>
            </div>
          </a-alert>
          <a-alert type="info" style="margin-top: 30px;">
            <div slot="message">
              3、社保缴费基数按个人工资水平（在当地社会平均工资的300%—60%范围）来确定，不得低于最低缴费标准；
            </div>
          </a-alert>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
import {
  cityAll,
  getTypesWithBase,
  configCalculator
} from "@/api/human/park";
import CityPicker from './components/city-picker.vue';
export default {
  name: 'scaleList',
  components: {
    CityPicker
  },
  data() {
    return {
      resultInfo: {}, // 计算结果
      isResult: false, // 计算结果展示
      params: {
        cityId: "",
        insureTypeId: undefined,
        fundsTypeId: undefined,
        socialBase: "",
        fundsBase: ""
      },
      cityName: "",
      insureTypeMin: 0, // 社保基数最小值
      insureTypeMax: 0, // 社保基数最大值
      fundsTypeMin: 0, // 公积金基数最小值
      fundsTypeMax: 0, // 公积金基数最大值

      cityList: {}, // 城市列表
      insureTypeList: [], // 社保类型列表
      fundsTypeList: [], // 公积金比例列表
    }
  },
  activated() {
    this.getCityList();
  },
  methods: {
    // 获取社保城市
    async getCityList() {
      const { code, data } = await cityAll();
      if (code === '1') {
        this.cityList = data;
      }
    },
    // 城市回调
    handleCity(id, name) {
      this.params.cityId = id;
      this.cityName = name;
      this.isResult = false;
      this.getinsureTypeList();
    },
    // 社保选择
    insureChange() {
      this.params.socialBase = this.insureTypeList.filter(item => item.typeId == this.params.insureTypeId)[0]?.minBase;
      this.insureTypeMin = this.insureTypeList.filter(item => item.typeId == this.params.insureTypeId)[0]?.minBase;
      this.insureTypeMax = this.insureTypeList.filter(item => item.typeId == this.params.insureTypeId)[0]?.maxBase;
    },
    // 公积金选择
    fundsChange() {
      this.params.fundsBase = this.fundsTypeList.filter(item => item.typeId == this.params.fundsTypeId)[0]?.minBase;
      this.fundsTypeMin = this.fundsTypeList.filter(item => item.typeId == this.params.fundsTypeId)[0]?.minBase;
      this.fundsTypeMax = this.fundsTypeList.filter(item => item.typeId == this.params.fundsTypeId)[0]?.maxBase;
    },
    // 获取类型
    async getinsureTypeList() {
      const { code, data } = await getTypesWithBase(this.params.cityId);
      if (code === '1') {
        this.insureTypeList = data.insureTypes;
        this.fundsTypeList = data.fundsTypes;
        this.params.insureTypeId = data.insureTypes[0]?.typeId;
        this.params.fundsTypeId = data.fundsTypes[0]?.typeId;
        this.insureChange();
        this.fundsChange();
      }
    },
    // 获取计算结果
    async getResultInfo() {
      const { code, data } = await configCalculator(this.params);
      if (code === '1') {
        this.resultInfo = data;
      }
    },
    // 立即计算
    compute() {
      this.isResult = true;
      this.getResultInfo();
    },
    // 重置
    reset() {
      this.params.cityId = "";
      this.params.insureTypeId = undefined;
      this.params.fundsTypeId = undefined;
      this.params.socialBase = "";
      this.params.fundsBase = "";
      this.insureTypeMin = 0;
      this.insureTypeMax = 0;
      this.fundsTypeMin = 0;
      this.fundsTypeMax = 0;
      this.isResult = false;
    }
  }
}
</script>
<style lang="less" scoped>
.ant-alert-info {
  background: #fbfbfb;
}

.insure {
  padding-left: 24px;

  span {
    color: #4cbb88;
    font-weight: 600;
    padding: 0 6px;
  }
}

.result {
  .head {
    .ant-col-8 {
      color: rgba(0, 0, 0, .85);
      font-weight: 600;
      text-align: center;
      background: #f4f4f4;
      border-bottom: 1px solid #e8e8e8;
      text-align: center;
      padding: 16px;
      overflow-wrap: break-word;
    }
  }

  .content {
    &:nth-child(2n+1) {
      background: #fafafa;
    }
    .ant-col-8 {
      color: rgba(0, 0, 0, .65);
      border-bottom: 1px solid #e8e8e8;
      text-align: center;
      padding: 16px;
      overflow-wrap: break-word;
    }
  }

  .foot {
    .ant-col-8 {
      background-color: #f5f7fa;
      color: #606266;
      border-bottom: 1px solid #e8e8e8;
      text-align: center;
      padding: 8px 16px;
      overflow-wrap: break-word;
    }
  }
}
</style>